<template>
	<div class="login_background">
		<div class="login_background_front"></div>
		<div class="login_main">
			<div class="login-form">
				<a-card class="ant-card-body">
					<div class="login-header">
						<div class="logo">
							<img :alt="sysBaseConfig.SYS_NAME" :src="sysBaseConfig.SYS_LOGO" />
							<label>{{ sysBaseConfig.SYS_NAME }}</label>
							<div class="login_config">
								<a-dropdown v-if="sysBaseConfig.SYS_TRIGGER_LANGUAGE == 'true'">
									<translation-outlined class="svgs" />
									<template #overlay>
										<a-menu>
											<a-menu-item v-for="item in lang" :key="item.value" :command="item"
												:class="{ selected: config.lang === item.value }"
												@click="configLang(item.value)">
												{{ item.name }}
											</a-menu-item>
										</a-menu>
									</template>
								</a-dropdown>
							</div>
						</div>

						<!--<h2>{{ $t('login.signInTitle') }}</h2>-->
					</div>
					<a-tabs v-model:activeKey="activeKey">
						<a-tab-pane v-if="sysBaseConfig.LOGIN_FUNCTION_PASSWORD == 'true'" key="userAccount"
							:tab="$t('login.accountPassword')">
							<a-form ref="loginForm" :model="ruleForm" :rules="rules">
								<a-form-item name="account">
									<a-input v-model:value="ruleForm.account"
										:placeholder="$t('login.accountPlaceholder')" size="large" @keyup.enter="login">
										<template #prefix>
											<UserOutlined class="login-icon-gray" />
										</template>
									</a-input>
								</a-form-item>
								<a-form-item name="password">
									<a-input-password v-model:value="ruleForm.password"
										:placeholder="$t('login.PWPlaceholder')" size="large" autocomplete="off"
										@keyup.enter="login">
										<template #prefix>
											<LockOutlined class="login-icon-gray" />
										</template>
									</a-input-password>
								</a-form-item>
								<a-form-item name="validCode" v-if="captchaOpen">
									<a-row :gutter="8">
										<a-col :span="17">
											<a-input v-model:value="ruleForm.validCode"
												:placeholder="$t('login.validLaceholder')" size="large"
												@keyup.enter="login">
												<template #prefix>
													<verified-outlined class="login-icon-gray" />
												</template>
											</a-input>
										</a-col>
										<a-col :span="7">
											<img :src="validCodeBase64" class="login-validCode-img"
												@click="loginCaptcha" />
										</a-col>
									</a-row>
								</a-form-item>

								<a-form-item>
									<a href="/findpwd" v-if="sysBaseConfig.LOGIN_FUNCTION_FORGET === 'true'"
										style="color: #0d84ff">{{
											$t('login.forgetPassword') }}？</a>
								</a-form-item>
								<a-form-item>
									<a-button type="primary" class="w-full" :loading="loading" round size="large"
										@click="login">{{
											$t('login.signIn') }}
									</a-button>
								</a-form-item>
							</a-form>
						</a-tab-pane>
						<a-tab-pane v-if="sysBaseConfig.LOGIN_FUNCTION_SMS == 'true'" key="userSms"
							:tab="$t('login.phoneSms')" force-render>
							<phone-login-form />
						</a-tab-pane>
					</a-tabs>
					<!-- <three-login /> -->
				</a-card>
			</div>
		</div>
		<div class="sys_div">
			<label class="sys_version">{{ '版权所属：杭州**信息技术有限公司' }}</label>
		</div>
	</div>
</template>

<script>
import loginApi from '@/api/auth/loginApi'
import phoneLoginForm from './phoneLoginForm.vue'
import smCrypto from '@/utils/smCrypto'
import { required } from '@/utils/formRules'
import { afterLogin } from './util'
import config from '@/config'
import configApi from '@/api/dev/configApi'
import tool from '@/utils/tool'
import { globalStore, iframeStore, keepAliveStore, viewTagsStore } from '@/store'
import { mapActions, mapState } from 'pinia'

export default {
	name: 'Login',
	components: {
		phoneLoginForm
		// threeLogin
	},

	data() {
		return {
			activeKey: 'userAccount',
			validCodeBase64: '',
			that: this,
			ruleForm: {
				account: '',
				password: '',
				validCode: '',
				validCodeReqNo: '',
				autologin: false
			},
			rules: {
				account: [required(this.$t('login.accountError'), 'blur')],
				password: [required(this.$t('login.PWError'), 'blur')]
			},
			loading: false,
			config: {
				lang: tool.data.get('APP_LANG') || this.$CONFIG.LANG,
				theme: tool.data.get('APP_THEME') || 'default'
			},
			lang: [
				{
					name: '简体中文',
					value: 'zh-cn'
				},
				{
					name: 'English',
					value: 'en'
				}
			],
			captchaOpen: false
		}
	},
	computed: {
		...mapState(globalStore, ['sysBaseConfig'])
	},
	watch: {
		'config.theme': function (val) {
			document.body.setAttribute('data-theme', val)
		},
		'config.lang': function (val) {
			this.$i18n.locale = val
			tool.data.set('APP_LANG', val)
		}
	},
	created() {
		this.clearViewTags()
		this.clearKeepLive()
		this.clearIframeList()
	},
	mounted() {
		let formData = ref(config.SYS_BASE_CONFIG)
		configApi.configSysBaseList().then((data) => {
			if (data) {
				data.forEach((item) => {
					formData.value[item.configKey] = item.configValue
				})
				tool.data.set('SYS_BASE_CONFIG', formData.value)
				this.setSysBaseConfig(formData.value)
				//如果验证码开关是开就加载验证码
				if (formData.value['LOGIN_CAPTCHA_OPEN'] === 'true') {
					this.captchaOpen = true
					this.loadCaptcha()
				}
			}
		})
	},
	methods: {
		...mapActions(keepAliveStore, ['clearKeepLive']),
		...mapActions(viewTagsStore, ['clearViewTags']),
		...mapActions(iframeStore, ['clearIframeList']),
		...mapActions(globalStore, ['setSysBaseConfig']),
		// 通过开关加载内容
		loadCaptcha() {
			// 判断是否开启验证码
			if (this.captchaOpen) {
				// 加载验证码
				this.loginCaptcha()
				// 加入验证码校验
				this.loginCaptchaRule()
			}
		},
		// 获取验证码
		loginCaptcha() {
			loginApi.getPicCaptcha().then((data) => {
				this.validCodeBase64 = data.validCodeBase64
				this.ruleForm.validCodeReqNo = data.validCodeReqNo
			})
		},
		// 加入校验
		loginCaptchaRule() {
			this.rules.validCode = [required(this.$t('login.validError'), 'blur')]
		},
		// 用户名密码登录
		async login() {
			this.$refs.loginForm.validate().then(async () => {
				this.loading = true
				const loginData = {
					account: this.ruleForm.account,
					// 密码进行SM2加密，传输过程中看到的只有密文，后端存储使用hash
					password: smCrypto.doSm2Encrypt(this.ruleForm.password),
					validCode: this.ruleForm.validCode,
					validCodeReqNo: this.ruleForm.validCodeReqNo
				}
				// 登录
				try {
					await loginApi.login(loginData) //这里token存储，放到请求拦截裂存储
					await afterLogin()
				} catch (err) {
					// 加载验证码
					this.loginCaptcha()
				} finally {
					this.loading = false
				}
			})
		},
		configLang(key) {
			this.config.lang = key
		}
	}
}
</script>

<style lang="less">
@import 'login';

.login_background {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	background-size: cover;
	background: hsla(220, 43%, 96%, 1) url(/img/login_background.png) center;
}

.login_background_front {
	position: relative;
	width: 56%; // 1090px;
	height: 66%; // 749px;
	left: 2.2%;
	top: 17.2%;
	overflow: hidden;
	background: url(/img/login_background_front.png) no-repeat center;
	background-size: 100% 100%;
}
</style>
